<%@ include file="../common/IncludeTop.jsp"%>

<style>
	.ele{

		display: flex;
		justify-content: center;
		align-items: center;
	}
	ul{
		list-style: none;
	}
	ul li {
		padding-right: 30px;
		float: left;
	}
	a {
		text-decoration: none;
		color: black;
	}
	.active a {
		border-bottom: 2px solid #F40;
	}
	a:hover{
		color: #f40;
	}


</style>
<script type="text/javascript">
	window.onload = function(){
		var obtn = document.getElementsByTagName("li");
		var oElec = document.getElementsByClassName("elec");

		var i = 0;

		for(i = 0;i < obtn.length;i++){
			obtn[i].index = i;//记录索引值
			obtn[i].onclick = function(){
				for(var j = 0;j < obtn.length;j++){
					obtn[j].className = "";
					oElec[j].style.display = 'none';
				}
				this.className = "active";
				oElec[this.index].style.display = "block";
			};
		}
	};
</script>



<div id="Catalog">
	<form action="confirmOrder" method="post">
	<table>
		<tr>
			<th colspan=2>Payment Details</th>
		</tr>
		<tr>
			<td>Card Type:</td>
			<td>
				<select name="cardType">
					<option selected="selected" value="Visa">Visa</option>
					<option value="MasterCard">MasterCard</option>
					<option value="American Express">American Express</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>Card Number:</td>
			<td>
				<input type="text" name="creditCard" value="999 9999 9999 9999"/>
				
			</td>
		</tr>
		<tr>
			<td>Expiry Date (MM/YYYY):</td>
			<td><input type="text" name="expiryDate" value="12/03"/></td>
		</tr>
	</table>


		<div class="ele">

			<ul>
				<li class="active"><a href="#">Billing Address</a></li>
				<li ><a href="#">Shipping Address</a></li>
			</ul>
		</div>


<div class="elec" style="display: block;">
	<table>
		<tr>
			<td>First name:</td>
			<td><input type="text" name="billToFirstName" value="${sessionScope.account.firstName}"/></td>
		</tr>
		<tr>
			<td>Last name:</td>
			<td><input type="text" name="billToLastName" value="${sessionScope.account.lastName}"/></td>
		</tr>
		<tr>
			<td>Address 1:</td>
			<td><input type="text" name="billAddress1" value="${sessionScope.account.address1}"/></td>
		</tr>
		<tr>
			<td>Address 2:</td>
			<td><input type="text" name="billAddress2" value="${sessionScope.account.address2}"/></td>
		</tr>
		<tr>
			<td>City:</td>
			<td><input type="text" name="billCity" value="${sessionScope.account.city}"/></td>
		</tr>
		<tr>
			<td>State:</td>
			<td><input type="text" name="billState" value="${sessionScope.account.state}"/></td>
		</tr>
		<tr>
			<td>Zip:</td>
			<td><input type="text" name="billZip" value="${sessionScope.account.zip}"/></td>
		</tr>
		<tr>
			<td>Country:</td>
			<td><input type="text" name="billCountry" value="${sessionScope.account.country}"/></td>
		</tr>


	</table>
</div>
<div class ="elec" style="display: none;">

	<table>

		<tr>
			<td>First name:</td>
			<td><input type="text" name="shipToFirstName" value="${sessionScope.account.firstName}"/></td>
		</tr>
		<tr>
			<td>Last name:</td>
			<td><input type="text" name="shipToLastName" value="${sessionScope.account.lastName}"/></td>
		</tr>
		<tr>
			<td>Address 1:</td>
			<td><input type="text" name="shipAddress1" value="${sessionScope.account.address1}"/></td>
		</tr>
		<tr>
			<td>Address 2:</td>
			<td><input type="text" name="shipAddress2" value="${sessionScope.account.address2}"/></td>
		</tr>
		<tr>
			<td>City:</td>
			<td><input type="text" name="shipCity" value="${sessionScope.account.city}"/></td>
		</tr>
		<tr>
			<td>State:</td>
			<td><input type="text" name="shipState" value="${sessionScope.account.state}"/></td>
		</tr>
		<tr>
			<td>Zip:</td>
			<td><input type="text" name="shipZip" value="${sessionScope.account.zip}"/></td>
		</tr>
		<tr>
			<td>Country:</td>
			<td><input type="text" name="shipCountry" value="${sessionScope.account.country}"/></td>
		</tr>


	</table>

</div>

		<input name="newOrder" value="Continue" type="submit"/>
    </form>
</div>

<%@ include file="../common/IncludeBottom.jsp"%>